<template>
   <Card style="margin-bottom:30px;">
        <div >
            <!-- v-hasC="{ name: 'rbac-module-create', flag: 'v1/rbac/module/create' }" -->
            <Input  placeholder="请输入人员姓名或手机号码" clearable  v-model="keyword" style="width:250px;" @on-change="searchInput" @on-clear="searchInput"
            v-hasC="{
                name: '-v1-rbac-member-manager-member-list',
                flag: '/v1/rbac/member/manager-member-list',
            }"
            ></Input>
        <Button
            class="ivu-ml-8"
            type="primary"
            @click="handleOpenCreate"
            v-hasC="{
                name: '-v1-rbac-member-create-manager',
                flag: '/v1/rbac/member/create-manager',
            }"
            >新建</Button
        >
        <Table highlight-row
            ref="table"
            :columns="columns"
            :data="list"
            :loading="loading"
            class="ivu-mt"
            v-hasC="{
                name: '-v1-rbac-member-manager-member-list',
                flag: '/v1/rbac/member/manager-member-list',
            }"
        >
            <template slot-scope="{ row }" slot="status">
                <Badge v-if="row.status_str === '启用'" status="success" text="启用" />
                <Badge v-if="row.status_str === '禁用'" status="error" text="禁用" />
            </template>
            <template slot-scope="{ row }" slot="project_name_arr">
                <Tag color="blue">{{row.project_name}}</Tag>
            </template>
            <template slot-scope="{ row, index }" slot="action">
            <a @click="handleReset(row, index)"  
                v-hasC="{name: '-v1-rbac-member-change-password2',flag: '/v1/rbac/member/change-password'}"
            >重置密码</a>
            <Divider type="vertical"  v-hasC="{
                    name: '-v1-rbac-member-unbind-project2',
                    flag: '/v1/rbac/member/unbind-project',
                }" />
            <a @click="handleUnbind(row, index)" 
                v-hasC="{
                    name: '-v1-rbac-member-unbind-project2',
                    flag: '/v1/rbac/member/unbind-project',
                }"
            >解绑</a>
            <!-- v-hasC="{ name: 'rbac-module-update', flag: 'v1/rbac/module/update' }" -->
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center" 
            v-hasC="{
                name: '-v1-rbac-member-manager-member-list',
                flag: '/v1/rbac/member/manager-member-list',
            }">
            <Page
            :total="total"
            :current.sync="current"
            show-total
            show-elevator
            :page-size="size"
            @on-change="handleChangeSize"
            :page-size-opts="pageOpts"
            show-sizer
            @on-page-size-change="changePageSize"
            />
        </div>
        <Modal v-model="showCreate" :title="title" :mask-closable="false" :loading="creating" @on-cancel='canceledit(modalname)'>
            <Form ref="modalname" :model="createMenuData" :rules="createRules" :label-width="100">
                <FormItem label="项目：" prop="project_ids">
                    <Select multiple style="width:390px"  placeholder="请选择项目切换" v-model="createMenuData.project_ids"  >
                        <Option v-for="item in project" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="手机号：" prop="mobile">
                    <Input v-model="createMenuData.mobile" placeholder="请输入手机号" maxlength="11"  @on-blur="changemoblie" clearable/>
                </FormItem>
                <FormItem label="姓名：" prop="" v-if="showName">
                    <span>{{ createMenuData.name }}</span>
                    <!-- <Input v-model="createMenuData.name" placeholder="请输入姓名" clearable/> -->
                </FormItem>
            </Form>
            <div slot='footer'>
                <Button @click='canceledit(modalname)'>取消</Button>
                <Button @click='handleCreate(modalname)' type='primary' :disabled="disabled" :loading="submitLoading">保存</Button>
            </div>
        </Modal>
        <Modal v-model='modaldel' title="提示" :mask-closable='false'>
            <p>确定要将<strong class='red'>{{this.modalparams.realname}}</strong>从<strong class='red'>{{this.modalparams.project}}</strong>项目下解绑删除嘛？</p>
            <div slot='footer'>
                <Button @click='submitedits' type='primary'>确定</Button>
                <Button @click='modaldel = false'>取消</Button>
            </div>
        </Modal>
        </div>
    </Card>
  </template>
  <script>
      import {
          managermemberList,
          createDmanager,
          createmanagerInfo,
          searchmemberInfo
      } from '@/api/projectsetting.js';
      import {
        rbacmemberchangepassword,
        rbacmemberunbindproject
        } from "@api/peoplesetting";
      import util from '@/libs/util';
      export default {
          data () {
              return {
                modalname:'modalname',
                columns: [
                      {
                          title: 'ID',
                          key: 'id',
                          width: 80
                      },
                      {
                          title: '所属项目',
                        //   key: 'project_name',
                        slot: "project_name_arr",
                          minWidth: 100
                      },
                      {
                          title: '姓名',
                          key: 'realname',
                          minWidth: 130
                      },
                      {
                          title: '手机号',
                          key: 'mobile',
                          minWidth: 160
                      },
                      {
                          title: '最后登录时间',
                          key: 'last_time',
                          minWidth: 160
                      },
                      {
                          title: '最后登录IP',
                          key: 'last_ip',
                          minWidth: 140
                      },
                      {
                        title: '用户状态',
                        //   key: 'status_str',
                        minWidth: 140,
                        slot:'status'
                      },
                    //   {
                    //       title: '状态',
                    //       slot: 'status',
                    //       minWidth: 60
                    //   },
                      {
                          title: '操作',
                          slot: 'action',
                          align: 'center',
                          minWidth: 150,
                          fixed:'right'
                      }
                  ],
                  loading: false,
                  list: [],
                  pageOpts: [10, 20, 30, 50],
                  moduleList: [],
                  parentMenuList: [],
                  keyword:'',
                  current: 1,
                  size: 10,
                  total: 0,
                  showCreate: false,
                  modalparams:{realname:'',project:'',id:'',projectid:''},
                  createMenuData: {
                      name: '',
                      mobile:'',
                      project_ids:[],
                  },
                  createRules: {
                    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                    mobile: [{ required: true, message: '请输入正确的手机号', pattern: /^(13|14|15|18|17)\d{9}$/, trigger: 'blur' }],
                    //   sort: [
                    //       {
                    //           message: '排序必须是正数',
                    //           pattern: /^[+]{0,1}(\d+)$/,
                    //           trigger: 'blur'
                    //       }
                    //   ],
                    project_ids: [{ required: true, message: '请选择项目', trigger: 'change',type:'array' }],
                    
                  },
                  creating: true,
                  editing: true,
                  title: '新增',
                  project:[],
                  modaldel:false,
                  submitLoading:false,
                  disabled:false,
                  showName:false
              };
          },
          mounted(){
            this.getprojectInfo()
            this.getData()
          },
          methods: {
            //获取项目列表
            getprojectInfo(){
                createmanagerInfo().then(res=>{
                    this.project=res.condition.project
                })    
            },
            searchInput(){
                this.current=1
                this.getData()
            },
            getData () {
                  this.loading = true;
                  managermemberList({
                    keyword:this.keyword,
                    pageSize: this.size,
                    page: this.current
                  })
                      .then((res) => {
                          this.list = res.list;
                          this.total = res.total;
                      })
                      .finally(() => {
                          this.loading = false;
                  });
              },
              // 点击切换分页
              handleChangeSize (currentPage) {
                  this.current = currentPage;
                  this.getData();
              },
              changePageSize (e) {
                  this.size = e;
                  this.getData();
              },
              handleOpenCreate(){
                this.showCreate=true
              },
              canceledit(name){
                this.$refs[name].resetFields();
                this.createMenuData.name=''
                this.showCreate = false;
                this.disabled=false
                
              },
              //输入手机号获取姓名
              changemoblie(){
                console.log('222')
                this.disabled=true
                this.createMenuData.name=''
                searchmemberInfo({mobile:this.createMenuData.mobile}).then(res=>{
                        this.disabled=false
                        this.createMenuData.name=res.name
                        this.showName=true
                   
                }).catch(()=>{
                    this.showName=false
                })
              },
              // 新增数据
              handleCreate (name) {
                  this.$refs[name].validate((valid) => {
                      if (valid) {
                          let sendData = JSON.parse(JSON.stringify(this.createMenuData));
                          sendData.project_ids = sendData.project_ids.length>0?sendData.project_ids.join(','):'';
                            // 新建
                            createDmanager(sendData).then((res) => {
                                // 创建模块成功后，刷新页面
                                // this.showCreate = false;
                                // this.createMenuData.name=''
                                this.canceledit(name)
                                this.getData();
                                this.$Message.success('新建成功');
                            });
                        
                          this.creating = false;
                          this.$nextTick(() => {
                              this.creating = true;
                          });
                      } else {
                          this.creating = false;
                          this.$nextTick(() => {
                              this.creating = true;
                          });
                      }
                  });
              },
              //重置密码
              handleReset(row) {
                    this.$Modal.confirm({
                        title: "重置密码",
                        content: `<p>重置后用户的初始密码为：<strong class="red">jgwl123456</strong></p>`,
                        onOk: () => {
                        let params = {
                            id: row.id,
                            password: "jgwl123456",
                        };
                        rbacmemberchangepassword(params).then(() => {
                            this.$Message.success("重置成功");
                            this.getData();
                        });
                        },
                    });
                },
                handleUnbind(row) {
                    this.modalparams={
                        id:row.id,
                        realname:row.realname,
                        project:row.project_name,
                        projectid:row.project_id
                    }
                    this.modaldel=true
                },
                submitedits () {
                    rbacmemberunbindproject({ member_id: this.modalparams.id,project_id :this.modalparams.projectid }).then(() => {
                        this.$Message.info('解绑成功')
                        this.modaldel = false
                        this.modal = false
                        this.getData();
                        // this.$emit('askData')
                    });
            }

            }
      };
  </script>
  
